<template>
  <div class="root">
    <input value="转换" type="button" class="ll" @click="isShow=!isShow" />

    <transition name="hello" appear>
      <h1 v-show="isShow" class="come">哈哈哈哈哈哈哈哈哈</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: "cartoon",
  data() {
    return {
        isShow:true
    }
  },
};
</script >

<style scoped>
h1 {
  background-color: orange;
}

.root {
  padding: 10px 10px;
}
h1 {
  margin: 20px 0px;
}
.ll {
  margin-top: 20px;
}

.hello-enter-active {
  animation: dd 1s linear;
}

.hello-leave-active {
  animation: dd 1s reverse;
}

@keyframes dd {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>